<template>
<div id="app">
  <h2 class="title">{{info_data?.houseName}}</h2>
  <div class="tags">
    <span 
  class="tag-item"
  v-for="(value,i) in info_data?.houseTags" 
  :key="i"
  :style="{backgroundColor:value?.tagText?.background?.color}">
{{value?.tagText?.text}}
</span>
  </div>
<div class="pf">
    <div class="pf-left">
        <span class="big">{{info_data?.commentBrief?.overall}}</span>
        <span class="strong">{{info_data?.commentBrief?.scoreTitle}}</span>
        <span class="gray">{{info_data?.commentBrief?.commentBrief}}</span>
    </div>
    <div class="pf-right">{{info_data?.commentBrief?.totalCount}}条评论<van-icon name="arrow" /></div>
</div>
<div class="pf">
    <div>{{info_data?.nearByPosition?.address}}></div>
    <div>地图·周边</div>
</div>
</div>
</template>

<script setup>
defineProps({
    info_data: {
        default: () => ({})
    }
})
</script>
 
<style lang="less" scoped>
#app{
    padding: 5px 15px;
    .title{
        margin-bottom: 10px;
    }
    .tags{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .tag-item{
        color: orange;
        padding: 2px 3px;
        margin-right: 7px;
        margin-bottom: 10px;
    }
    }

    .pf{
        margin-top: 10px;
        padding: 10px 5px;
        display: flex;
        justify-content: space-between;
        background-color:rgba(228, 224, 224,0.4);
        border-radius: 10px;
        font-size: 13px;
        display: flex;
        align-items: center;
        .pf-right{
            color: orange;
        }
        .big{
            font-size: 20px;
            font-weight: 600;
        }
        .strong{
            font-weight: 600;
            margin-right: 2px;
        }
        .gray{
            color: gray;
        }
    }
}
</style>